<template>
  <div class="tzsq">
    <ul class="zuke-info">
      <li class="li-header">个人信息</li>
      <li>姓名<i class="fr">{{userInfo.trueName}}</i></li>
      <li>手机号码<i class="fr">{{userInfo.mobile}}</i></li>
      <li>身份证号<i class="fr">{{userInfo.idCard && (userInfo.idCard.substr(0, 4) + '********' + userInfo.idCard.substr(-4))}}</i></li>
    </ul>
    <ul class="order-info">
      <li class="li-header">房屋信息</li>
      <li>地址<i class="fr">{{ orderInfo.housePersons.address }}</i></li>
    </ul>
    <ul class="order-info">
      <li class="li-header">退租信息</li>
      <li>申请日期<i class="fr">{{ new Date() | formatDate}}</i></li>
      <li>
        <group>
          <datetime
            v-model="tzTime"
            placeholder="年/月/日"
            title="退租日期">
          </datetime>
          </group>
      </li>
      <li>退租原因<i class="fr">
        <group>
          <selector class="select" placeholder="选择退租原因" v-model="TZYY" :options="TZYYoptions"></selector>
        </group>
      </i></li>
      <li>其它原因</li>
      <li class="Li-QTTZYY"><textarea class="QTTZYY" v-model="QTTZYY" type="text" maxlength="50" name="" id="" cols="30" rows="10"></textarea></li>
    </ul>
    <div class="btn">
      <span class="cancel" @click="$router.go(-1)">取消退租申请</span><span class="send" @click="$vux.toast.text('正在开发中')">发送退租申请</span>
    </div>
  </div>
</template>

<script>
  import { Datetime } from 'vux'
  export default {
    name: 'tui-zhu-shen-qing',
    components: {
      Datetime
    },
    data () {
      return {
        showDialog: false,
        orderId: '',
        tzTime: '',
        TZYY: '', // 退租原因
        QTTZYY: '',
        TZYYoptions: [{ key: '到期退租', value: '到期退租' }, { key: '提前退租', value: '提前退租' }], // 朝向选择
        orderInfo: {
          contractPerson: '',
          housePersons: '',
          landlord: '',
          order: '',
          renter: ''
        },
        userInfo: JSON.parse(localStorage.getItem('userInfo'))
      }
    },
    created () {
      this.orderId = this.$route.query.orderId
      this.getOrderDetail(this.orderId)
    },
    methods: {
      confirm () {
        let data = {}
        this.$vux.toast.text('提交退租申请成功')
        this.showDialog = false
        // this.$router.go(-1)
        this.axiosPost(this.$api.tuzu, data).then(res => {
          if (res.code === '0000') {
            console.log(res)
          }
        })
      },
      getOrderDetail (orderId) {
        this.$axiosPosting(this.$api.queryOrderDetail4Renter, {orderId: this.orderId}).then(res => {
          this.orderInfo = {...res.data}
        })
      }
    }
  }
</script>
<style lang="less">
  .tzsq {
    .order-house-info {
      border-bottom: 6px solid #F3F3F3;
    }
    .vux-datetime {
      padding: 0;
      font-size: 15px;
    }
    .Li-QTTZYY {
      height: auto;
      // margin-bottom: 140px;
      .QTTZYY {
        width: 100%;
      }
    }
    .weui-cells {
      line-height: 48px;
      margin: 0;
      &::before, &::before {
        border: 0;
        border-bottom: 0;
      }
    }
    .btn {
      margin-top: 45px;
      position: relative;
    span {
        background-color:#ff9600;
        display: inline-block;
        height: 45px;
        line-height: 45px;
        width:50%;
        position: absolute;
        bottom: 0;
        color: white;
        text-align: center;
        margin-top: 50px;
      }
      span.cancel {
        left: 0;
        background: none;
        border-top: 1px solid #F3F3F3;
        color: #656565;
      }
      span {
        right: 0;
      }
    }
    .weui-dialog {
      padding: 0;
      li {
        height: 40px;
        line-height: 40px;
        overflow: hidden;
      }
      .i-alert {
        height: 45px;
      }
      .btn-yes,.btn-no {
        background-color:#ff9600;
        display: inline-block;
        height: 45px;
        line-height: 45px;
        width:50%;
        position: absolute;
        bottom: 0;
        
        color: white;
        text-align: center;
        // margin-top: 50px;
      }
      .btn-yes {
        right: 0;
      }
      .btn-no {
        left: 0;
        background: none;
        border-top: 1px solid #F3F3F3;
        color: #656565;
      }
    }
    
    ul {
      border-bottom: 6px solid #F3F3F3;
      li {
        padding: 0 18px;
        box-sizing: border-box;
        height: 48px;
        line-height: 48px;
        border-bottom: 1px solid #F3F3F3;
        width: 100%;
        font-size: 15px;
        text-align: left;
        i {
          font-style: normal;
        }
        .fl {
          float: left;
          height: 20px;
          line-height: 20px;
          margin-top: 14px;
          text-align: center;
        }
        .o-num {
          display: inline-block;
          border-radius: 100%;
          border:1px solid black;
          width: 18px;
          height: 18px;
          margin-top: 15px;
          line-height:14px;
          font-size: 12px;
          box-sizing: border-box;
          padding: 0 0 3px 0;
          position: relative;

        } 
        .fr {
          float: right;
          color: #777777;
        }
      }
    .li-header {
      padding: 0;
      height: 60px;
      line-height: 54px;
      border: 0;
      &::before {
        content: '';
        display: inline-block;
      width: 3px;
      position: relative;
      top: 1px;
      height: 14px;
      background-color: #ff9600;
      margin-right: 11px;
      }

    }
    }
  }
</style>
